<template>
  <div class="background-container" style="background-image: url('/img/1.jpg');">
    <el-container>
      <el-header>
        <el-row style="color:rgb(223, 205, 186);font-weight:bold;font-size: 30px; line-height: 86px">
          <el-col :span="5"></el-col>
          <el-col :span="1">
            <img src="/img/logo.webp" style="width: 50px; margin-top: 10px">
          </el-col>
          <el-col :span="1">
            <img src="/img/verticalLine.png" style="height: 80px;">
          </el-col>
          <el-col :span="17">
            <span class="title-text">月子中心用户端</span>
          </el-col>
        </el-row>
      </el-header>
      <el-main>
        <el-row>
          <el-col :span="6">
            <el-card style="margin-top: 50px;">
              <h3 style="text-align: center">服务导航</h3>
              <el-menu
                default-active="1"
                class="el-menu-vertical-demo"
                @select="handleSelect"
              >
                <el-menu-item index="1">
                  <span>服务管理</span>
                </el-menu-item>
                <el-menu-item index="2">
                  <span>用户详情</span>
                </el-menu-item>
              </el-menu>
            </el-card>
          </el-col>
          <el-col :span="18">
            <el-card style="margin-top: 50px; margin-left: 20px;">
              <h3 style="text-align: center">欢迎使用月子中心服务</h3>
              <el-carousel height="400px">
                <el-main style="height:90vh;padding: 0;overflow-y: auto;">
                  <router-view/>
                </el-main>
              </el-carousel>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const carouselItems = ref([
  '/img/carousel1.jpg',
  '/img/carousel2.jpg',
  '/img/carousel3.jpg'
])

const handleSelect = (index) => {
  switch (index) {
    case '1':
      router.push('/user/service')
      break
    case '2':
      router.push('/user/userDetails')
      break
  }
}
</script>

<style scoped>
.background-container {
  background-size: cover;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.title-text {
  font-family: '楷体', cursive;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.el-card {
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 10px;
}

.el-menu {
  border-right: none;
}
</style>